<script setup>
import { topNavList, selectMenuList, sourceArr } from '../js/pageDate.js'
import LegendVue from './Legend.vue'
import { pause, play, next, backspace } from '../js/pageContorl.js'
import { ref, onMounted } from 'vue'
import { mainStore } from '@store'
import { connectWS_per_eff } from '../js/ws_per_eff.js'

const store = mainStore()

const source = ref(1)
store.selectMenuListData = selectMenuList
let inputFrame = ref()
inputFrame.value = store.frameNum

// WebSocket 连接 这个页面中 同时只会存在一种点云数据
store.carWsConnect = connectWS_per_eff(1)

let showImage = ref(false)
const handleNav = (item) => {
  item.show = !item.show

  if (item.id == 4) {
    showImage.value = item.show
  }

  if (item.id != 4) {
    store.showBtnInfo[item.id] = item.show
    store.relaodPerceivedEffect = Date.now()
  }

}

let navList = ref(topNavList)

const changeFrameNum = () => {
  if (inputFrame.value > 20) return ElMessage.error('最多保留20帧')
  store.frameNum = inputFrame.value - 0
  store.perceivedEffectTopId = 0
  ElMessage.success('保存成功')
}

const updataThree = (value) => {
  // 先销毁场景 关闭上一个ws 再重新连接渲染
  window.ThreePerceivedEffect.destroyed()
  store.carWsConnect?.close()
  store.curWsPathId = value
  // 将原来的数据清空
  store.carData = []
  store.videoData_Json = []
  store.reloadVideoRet = Date.now()
  setTimeout(() => {
    store.carWsConnect = connectWS_per_eff(value)
  }, 305)

  store.relaodPerceivedEffect = Date.now()
}

const updateAngle = (angle) => {
  window.ThreePerceivedEffect.updateAngle(angle)
}
</script>

<template>
  <div class="topnav-container">
    <div class="btns">
      <div class="showMenus">
        <p v-for="item in navList" :class="item.show ? 'show' : ''" @click="handleNav(item)">
          {{ item.title }}
        </p>
      </div>

      <div class="showMenus">
        <p @click="updateAngle('default')">还原视角</p>
      </div>

      <div class="selectItem">
        <p>来源：</p>
        <el-select v-model="source" placeholder="请选择" style="width: 160px" @change="updataThree">
          <el-option v-for="item in sourceArr" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>

      <!-- 显示图例 -->
      <div class="showImage" v-if="showImage">
        <LegendVue />
      </div>

      <!-- 显示历史保留帧率 -->
      <div class="showHistory" v-show="store.perceivedEffectTopId == 2">
        <p>保留暂存帧率：</p>
        <div>
          <el-input v-model="inputFrame" size="small" style="width: 88px" placeholder="输入留存帧率" />
          <span>帧</span>
        </div>
        <p @click="changeFrameNum">确定</p>
      </div>
    </div>

    <!-- 前进暂停等等 -->
    <div class="pageContorl">
      <div class="pause btn_bg" @click="pause" v-if="store.perceivedEffectStatus == 'play'">
        <p>暂停</p>
      </div>

      <div class="play" v-else>
        <p @click="backspace(2)">后退满帧</p>
        <p @click="backspace(1)">后退1帧</p>
        <p @click="play">开始</p>
        <p @click="next(1)">前进1帧</p>
        <p @click="next(2)">前进满帧</p>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.topnav-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 10px;
}

.selectItem {
  width: 230px;
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.btns {
  width: 60%;
  position: relative;
  font-size: 14px;
  display: flex;
  align-items: center;

  .showMenus {
    display: flex;
    > p {
      height: 22px;
      padding: 0 8px;
      line-height: 22px;
      border-radius: 2px;
      border: 1px solid #ccc;
      cursor: pointer;
      margin-right: 10px;
      font-size: 14px;
    }
  }
  .showHistory {
    height: 88px;
    width: 126px;
    background-color: white;
    position: absolute;
    top: 30px;
    left: 40px;
    padding: 6px;
    border: 1px solid #ccc;
    box-shadow: rgba(0, 18, 38, 0.1) 0px 4px 10px 0px;
    z-index: 999;
    > div {
      display: flex;
      align-items: center;
      > .el-input {
        margin-top: 4px;
        margin-right: 10px;
      }
    }
    > span {
      margin-top: 20px;
    }
    > p:nth-child(3) {
      width: 32px;
      color: blue;
      font-size: 14px;
      margin-top: 10px;
      text-align: center;
      cursor: pointer;
      margin-left: auto;
    }
  }
  .showImage {
    position: absolute;
    top: 30px;
    background-color: rgb(239, 239, 239);
    width: 500px;
    height: 400px;
    overflow-y: auto;
    z-index: 99;
  }
}

.button {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-left: 10px;
}

.pause {
  padding: 2px 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 120px;
  cursor: pointer;
}

.play {
  display: flex;
  > p {
    background-color: rgb(64, 149, 229);
    color: white;
    border-radius: 2px;
    margin-left: 10px;
    padding: 2px 8px;
    font-size: 14px;
    cursor: pointer;
  }
}

.show {
  background-color: rgb(64, 149, 229);
  color: white;
  border: 1px solid rgb(64, 149, 229) !important;
}

.pageContorl {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info {
  margin-left: auto;
  margin-right: 10px;
  font-size: 12px;
  line-height: 12px;
}
</style>

<style>
.topnav-container {
  .el-select__wrapper {
    min-height: 24px !important;
  }
}
</style>
